<template>
  <!-- 根容器 -->
  <div class="root">
    <!-- 登录容器，居中对齐 -->
    <div class="login-container">
      <!-- 登录卡片 -->
      <div class="login-card">
        <!-- 使用element的tabs组件，透明样式，充满卡片宽度 -->
        <el-tabs type="border-card" stretch class="transparent-tabs">
          <!-- 用户登录标签页 -->
          <el-tab-pane label="用户登录">
            <!-- 用户登录表单 -->
            <el-form :model="user" label-position="left" label-width="70px" class="elegant-form">
              <!-- 账户名输入框 -->
              <el-form-item label="账户名">
                <el-input v-model="user.account" class="custom-input" />
              </el-form-item>
              <!-- 密码输入框，带显示密码功能 -->
              <el-form-item label="密码">
                <el-input v-model="user.password" show-password class="custom-input" />
              </el-form-item>
              <!-- 登录按钮，点击后弹出确认对话框 -->
              <el-form-item>
                <!-- 确认登录按钮 -->
                <el-form-item>
                  <el-button type="primary" class="login-btn" @click="userLogin">立即登录</el-button>
                </el-form-item>
              </el-form-item>
            </el-form>
            <!-- 底部链接，包含注册按钮 -->
            <footer class="footer-link">
              <span>还没有账户？</span>
              <el-button text class="register-btn" @click="reigister">立即注册</el-button>
            </footer>
          </el-tab-pane>

          <!-- 员工登录标签页 -->
          <el-tab-pane label="员工登录">
            <!-- 员工登录表单 -->
            <el-form :model="employee" label-position="left" label-width="70px" class="elegant-form">
              <!-- 账户名输入框 -->
              <el-form-item label="账户名">
                <el-input v-model="employee.account" class="custom-input" />
              </el-form-item>
              <!-- 密码输入框，带显示密码功能 -->
              <el-form-item label="密码">
                <el-input v-model="employee.password" show-password class="custom-input" />
              </el-form-item>
              <!-- 登录按钮，点击后弹出确认对话框 -->
              <el-form-item>
                <el-form-item>
                  <el-button type="primary" class="login-btn" @click="employeeLogin">立即登录</el-button>
                </el-form-item>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive } from 'vue';
import axios from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus';
import router from "@/router";

const user = reactive({
  account: '',
  password: '',
});

const employee = reactive({
  account: '',
  password: '',
});

const userLogin = () => {
  console.log('userlogin', user.account, user.password);
  axios.post('http://localhost:8080/auth/user/login', user).then((response) => {
    console.log(response.data);
    if (response.data.state === 2001) {
      const uid = response.data.data[1]; // 获取 uid
      const role = response.data.data[2];
      const uname = response.data.data[3];
      console.log(response.data);
      localStorage.setItem('uid', uid); // 将 uid 存储到 localStorage
      localStorage.setItem('role', role);
      localStorage.setItem('uname', uname);
      ElMessage.success('登录成功，正在跳转...');
      router.push("/gym"); // 跳转到用户主页
    } else {
      ElMessage('登录失败,请检查用户名或密码');
    }
  }).catch((error) => {
      console.error('登录失败:', error);
      ElMessage.error('登录失败，请稍后重试');
    });
  };


const employeeLogin = () => {
  console.log('employeelogin', employee.account, employee.password);
  axios.post('http://localhost:8080/auth/employee/login', employee)
      .then((response) => {
        console.log(response.data);
        if (response.data.state === 2001) {
          ElMessage.success('登录成功，正在跳转...');
          const eid = response.data.data[2];
          const role = response.data.data[3];
          const ename = response.data.data[4];
          localStorage.setItem('eid', eid);
          localStorage.setItem('role', role);
          localStorage.setItem('ename', ename);
          roleRedirect(response.data.data[1]);
        } else {
          ElMessage.error('登录失败,请检查用户名或密码');
        }
      })
      .catch((error) => {
        console.error('登录失败:', error);
        ElMessage.error('登录失败，请稍后重试');
      });
};


const roleRedirect = (role)=>{
  console.log(role);
  switch (role) {
    case '管理员':router.push('/admin');break;
    case '教练':router.push('/coach');break;
    case '普通员工':router.push('/staff');break;
    default:router.push('/')
  }
}

const reigister = ()=>{
  router.push('/register')
}
</script>

<style scoped>
/* 根容器样式 */
.root {
  display: flex;
  min-height: 100vh;
  background: url("../assets/img/bg.jpg") no-repeat center/cover;
  backdrop-filter: blur(1px);
}

/* 登录容器样式 */
.login-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding-left: 10%;
}

/* 登录卡片样式 */
.login-card {
  width: 400px;
  min-height: 450px;
  background: rgba(30, 32, 36, 0.9);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(37, 37, 37, 0.3);
  backdrop-filter: blur(10px);
  border: 1px solid rgb(46, 45, 45);
  overflow: hidden;
  padding: 20px 0;
}

/* 透明tabs样式 */
.transparent-tabs {
  background: transparent !important;
  border: none !important;
}

/* tabs头部样式 */
::v-deep .transparent-tabs .el-tabs__header {
  background: rgba(37, 37, 37, 0.3);
  border-bottom: none;
  color: #2e2d2d;
}

/* 标签项字体颜色设为白色 */
::v-deep .transparent-tabs .el-tabs__item {
  color: rgba(255, 255, 255, 0.6); /* 更柔和的白色 */
  font-size: 16px;
  transition: all 0.3s ease-in-out;
}

/* 激活的标签项样式 */
::v-deep .transparent-tabs .el-tabs__item.is-active {
  color: #333333; /* 明显深色字体 */
  background-color: #ffffff; /* 白色背景 */
  font-weight: 500;
}

/* 标签项下划线颜色 */
::v-deep .transparent-tabs .el-tabs__nav-wrap::after {
  background-color: rgb(255, 255, 255);
}

/* 表单样式 */
.elegant-form {
  padding: 30px 25px 20px;
}

/* 表单项样式 */
.elegant-form .el-form-item {
  margin-bottom: 24px;
}

/* 最后一个表单项样式 */
.elegant-form .el-form-item:last-child {
  margin-bottom: 0;
}

/* 表单项标签字体颜色设为白色 */
.elegant-form ::v-deep .el-form-item__label {
  color: #ffffff;
}

/* 自定义输入框样式 */
.custom-input ::v-deep .el-input__inner {
  height: 42px;
  border-radius: 6px;
  border-color: #ffffff;
  transition: all 0.3s ease-in-out;
  box-sizing: border-box;
}

/* 聚焦时的输入框样式 */
.custom-input ::v-deep .el-input__inner:focus {
  border-color: rgba(37, 37, 37, 0.3);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6); /* 半透明外发光 */
}

/* 登录按钮样式 */
.login-btn {
  width: 100%;
  height: 42px;
  font-size: 16px;
  letter-spacing: 2px;
  background: linear-gradient(45deg, rgb(133, 129, 129), rgba(37, 37, 37, 0.3));
  border: none;
  border-radius: 6px;
  transition: all 0.3s ease-in-out;
}

/* 鼠标悬停时的登录按钮样式 */
.login-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* 底部链接样式 */
.footer-link {
  padding: 16px;
  text-align: right;
  font-size: 13px;
  color: #909399;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

/* 注册按钮样式 */
.register-btn {
  margin-left: 6px;
  font-size: 13px;
  color: #ffffff;
  transition: all 0.3s ease-in-out;
}

/* 鼠标悬停时的注册按钮样式 */
.register-btn:hover {
  color: #ffffff;
  text-decoration: underline;
}
</style>
